<template>
  <div id="btn1">
    <i class="el-icon-arrow-down" @click="change"></i>
    <p class="a1">搜索</p>
    <i class="el-icon-search , a3"></i>
    <input type="text" placeholder="知识的边界" class="a2" />
    <i class="a5" @click="change">取消</i>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="视频" class="b1" name="first">
        <div>
       <ul>
         <li class="b6" v-for="(item,i) in list" :key="i">
           <img src="../../assets/u133(1).png" alt="" class="b2"> 
          <div class="b3"><P class="b7">{{item.til}}</P>
           <p class="b8">{{item.zy}} | {{item.rm}} </p>
           <p class="b9"><i class="el-icon-user"></i> {{item.name}}</p>
           </div>
           <p class="b5">{{item.price}}</p> 
           </li>
       </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文章" class="b1" name="second"><div>
        <ul>
          <li class="c1" v-for="(item,i) in list2" :key="i">
            <img  class="c2" src="../../assets/u2285(1).jpg" alt="">
            <div>
              <p class="c3">{{item.til}}</p>
              <p class="c4">{{item.time}} | {{item.xs}}</p>
            </div>
          </li>
        </ul>
        </div>
        </el-tab-pane>
      <el-tab-pane label="老师" class="b1" name="third">
        <ul class="d2">
          <li class="d3" v-for="(item,i) in list3" :key="i">
            <img class="d1" src="../../assets/u297.png" alt="">
            <div>
              <p class="d5">{{item.name}}</p>
              <p class="d6">{{item.fs}}</p>
            </div>
          </li>
          </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  methods: {
    change() {
      this.$router.go(-1);
    },
       handleClick(tab, event) {
      },
  },
   data() {
     return {
         activeName: "second",
       list:[
         {
           id:"1",
           name:"钱自胜",
           til:"成为演讲高手",
           zy:"销售",
           rm:"基础入门",
           price:"￥99.00"
         }
       ],
       list2:[
         {
           id:"2",
           til:"卓越绩效管理与薪酬体系构建",
           time:"1天前",
           xs:"销售培训"
         }
       ],
       list3:[
         {
           id:3,
           name:"EthankDesingn",
           fs:"7.2w粉丝"
         }
       ]
     }
   },
};
</script>

<style >
.el-icon-arrow-down {
  transform: rotate(90deg);
  /* margin-top: 1vh; */
  margin-left: 2vw;
  position: absolute;
  /* top: 200px; */
  font-size: 3vw;
  left: 0vw;
  height: 5vh;
  color: black;
  font-weight: bold;
}

.a1 {
  text-align: center;
  font-size: 3vh;
  margin-top: 2vw;
}
.a2 {
  width: 76vw;
  height: 4vh;
  font-size: 2vh;
  text-indent: 8vw;
  border-radius: 3vw;
  margin-left: 5vw;
  margin-top: 4vh;
  outline: none;
  background: rgb(235, 231, 231);
}
.ac {
  position: relative;
}
.a3 {
  width: 4vw;
  height: 5vh;
  font-size: 3vh;
  margin-left: 3vw;
  position: absolute;
  left: 4vw;
  margin-top: 4.5vh;
}
.a5 {
  font-size: 2vh;
  margin-left: 5vw;
  color: blue;
}
.a6 {
  font-size: 3vw;
}
.a7 {
  width: 30vw;
  height: 3vh;
}
.b1 {
  font-size: 4vw;
}

.el-tabs el-tabs--top {
  margin-left: 2vw;
}
.b2{
  width: 40vw;
  height: 14vh;
}
.b6{
  display: flex;
  /* background: red; */
  height: 20vh;
  border-bottom: 1px solid #ccc;
  justify-content:space-around;
  margin-top: 4vh;
}
.b7{
  padding-top: 2vh;

  }
.b8{
  color: #ccc;
  padding: 1vh 0 0 0;
}
.b9{
  color: #ccc;
  padding: 1vh 0 0 0;
}
.b3{
  width: 28vw;
  height: 6vh;
  }
  .b5{
    width: 18vw;
    height: 3vh;
    /* background: red; */
    color:orange;
    font-size: 3vh;
    padding-top: 10vh;
  }
  .c1{
    display: flex;
    justify-content: space-around;
  }
  .c2{
    width: 26vw;
    height: 15vh;
    border-radius: 2vh;
    padding-top: 3vh;
  }
  .c3{
    font-size: 2.8vh;
    padding-top: 3vh;
  }
  .c4{
    padding: 4vh;
    color: #ccc;
    font: size 1vh;;
  }
  .d1{
    width: 17vw;
    height: 9vh;
    padding-top: 1.5vh;
    /* margin-left: -6vw; */
  }
  .d2{
    width: 98vw;
    height: 13vh;
    /* background: cyan; */
border-bottom: 1px solid #ccc;
  }
  .d3{
    display: flex;
    
  }
  .d5{
    margin-right: 3vw;
    margin-left: 5vw;
    padding-top: 2vh;
  }
  .d6{
    margin-left: 5vw;
    padding-top: 2vh;
    color: #ccc;
  }
</style>
<style scoped>
#btn1 >>>.el-tabs__item {
  margin-top: 4vh;
  height: 4vh;
  padding-left: 13vw;
  font-size: 4vh;
}
#btn1 >>> .el-tabs__item is-top{
    font-size: 40px;
}

</style>